<template>
    <div>
        <home-header></home-header>
        <home-swiper ></home-swiper>
        <home-icons :list="iconList"></home-icons>
        <home-recommend :list="recommendList"></home-recommend>
        <home-weekend :list="weekendList"></home-weekend>
    </div>
</template>

<script>
    import HomeHeader from './components/Header'
    import HomeSwiper from './components/Swiper'
    import HomeIcons from './components/Icons'
    import HomeRecommend from './components/Recommend'
    import HomeWeekend from './components/Weekend'
    import axios from 'axios'
    import { mapState } from 'vuex'

    export default {
        name: "Home",
        components: {
            HomeHeader, HomeSwiper, HomeIcons, HomeRecommend, HomeWeekend
        },
        data() {
            return {
                lastCity:'',
                iconList:[],
                recommendList:[],
                weekendList:[]

            }
        },
        methods: {
            getHomeInfo() {
                axios.get('/api/index.json?city='+this.city)
                    .then(this.getInfoSucc);
                this.lastCity = this.city
            },
            getInfoSucc(res) {
                console.log(res);
                if (res.data.data && res.data.ret){
                    const data = res.data.data;
                    this.iconList = data.iconList;
                    this.recommendList= data.recommendList;
                    this.weekendList = data.weekendList


                }
            }
        },
        mounted () {
            this.getHomeInfo()
        },
        computed:{
            ...mapState(['city'])
        },
        activated () {
            if (this.lastCity !== this.city) {
                this.lastCity = this.city;
                this.getHomeInfo()
            }
        }
    }
</script>

<style scoped>

</style>
